<template>
  <div class="box">
   <!-- 左侧 -->
    <div class="left">
      <!-- 左上 -->
      <div class="left-top">
        <Titles title="设备统计"></Titles>
        <statistics></statistics>
      </div>

      <!-- 左中 -->
       <div class="left-center">
          <Titles title="实时用电"></Titles>
          <div class="tong">

          <div class="ctrlt">
            <div class="iconfont icon-dianliang"></div>
            <div class="shu"> 
              <p>9308</p>
               <p>总用电量(kw)</p>
            </div>
          
          </div>  


                    <div class="ctrlt">
            <div class="iconfont icon-dianliang"></div>
            <div class="shu"> 
              <p>387</p>
               <p>总用电量(kw)</p>
            </div>
          
          </div>  

          </div>

          <usedian></usedian>
      </div>

      <!-- 左下 -->
    <div class="left-bottom">
          <Titles title="场地使用"></Titles>
          <leftbom></leftbom>
    </div>

    </div>

       <div class="center">
        <chinaMap class="maps"></chinaMap>
 <footernav class="footernav"></footernav>
      
       </div>

        <div class="right">
          <!-- 右上 -->
          <div class="right-top">
            <Titles title="设备检测"></Titles>

              <div class="fisrt"> 
                  <div class="imm"> <img src="../assets/images/muma.png" alt=""></div>
                  <righttop></righttop>
              </div>

                <tabone></tabone>
          </div>

            <!-- 右下 -->
          <div class="right-bottom">
            <Titles title="实时警报"></Titles>
            <rtbottom></rtbottom>
          
        </div>
    
        <div class="top"></div>
  </div>
  </div>
</template>

<script setup lang="ts">
import footernav from '../components/footernav.vue'
import Titles from '../components/Title.vue'
import statistics from '../components/Devices/statistics.vue'
import usedian from '../components/Devices/usedain.vue'
import leftbom from '../components/Devices/leftbom.vue'
import righttop from '../components/Devices/righttop.vue'
import tabone from '../components/Devices/tabone.vue'
import rtbottom from '../components/Devices/rtbottom.vue'
import chinaMap from '../components/Devices/chinaMap.vue'
</script>

<style scoped lang="scss">
.box{
  display: flex;

  position: relative;
  background-image: url('../assets//images/pageBg.png');
}


.left{
  width: 32%;
  height: 100vh;
  background: url('../assets//images/Left.png') no-repeat 0 0 / 100% 100vh;
}


/* 左上 */
.left-top{
  margin: 60px 60px 0px 50px;
  border: 1px solid #0f0;
  height: 30vh;
}

.left-center{
  margin: 0 60px 0px 50px;
  border: 1px solid rgb(204, 143, 38);
  height: 35vh;
}
.tong{
  width: 90%;
  display: flex;
  justify-content: space-around;
}
.ctrlt{
  display: flex;
  width: 30%;
  justify-content: space-between;
  align-items: center;
  border:1px solid #163c99;
  background:#04347b;
}
.icon-dianliang{
  font-size: 32px;
  color: red;
}
.shu{
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 左下*/
.left-bottom{
  margin: 0 60px 5px 50px;
  border: 1px solid #f00;
  height: 27vh;
}


/* 中间 */
.center{
  width: 36%;
  height: 100vh;
  position: relative;
  .maps{
    width: 100%;
    height: 60%;
    position: absolute;
    left: 0;
    top: 20%;
  }
  .footernav{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 65px;
  }
}




.right{
  width: 32%;
  height: 100vh;
  background: url('../assets/images/Right.png') no-repeat 0 0 / 100% 100vh;
  box-sizing: border-box;
  padding: 80px 50px 0;
  color: #fff;
  font-size: 10px;
}



/* 右上 */
.right-top{
  margin: 0 15px 10px 10px;

  height: 40vh;


}

.fisrt{
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 40%;
  align-items: center;
}
.imm img{
  width: 50px;
  height: 50px;
}

/* 右下*/
.right-bottom{
  margin:35px 10px 30px 15px;

  height: 40vh;


}





/* 顶部 */
.top{
 position: absolute;
 top: 0;
 left: 0;
 width: 100vw;
 height: 80px;
 background: url('../assets/images/Top.png') no-repeat 0 0 / 100% 100%;
 z-index: 1;
}

   
</style>